<template>
  <div>
    <el-form :inline="true" :model="params">
      <el-form-item label="记录ID">
        <el-input v-model="params.id" placeholder="请输入记录ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="聚水潭订单ID">
        <el-input v-model="params.o_id" placeholder="请输入聚水潭订单ID" clearable></el-input>
      </el-form-item>
      <el-form-item label="聚水潭订单号">
        <el-input v-model="params.so_id" placeholder="请输入聚水潭订单号" clearable></el-input>
      </el-form-item>


      <el-form-item label="订单ID">
        <el-input v-model="params.order_id" placeholder="请输入订单ID" clearable></el-input>
      </el-form-item>

      <el-form-item label="聚水潭订单状态">
        <el-select v-model="params.code" placeholder="请选择状态">
          <el-option
            v-for="item in orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="订单时间">-->
<!--        <el-date-picker-->
<!--          v-model="timer"-->
<!--          type="datetimerange"-->
<!--          format="yyyy-MM-dd HH:mm:ss"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          @change="handleTimer"-->
<!--        >-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="交易状态">-->
<!--        <el-select v-model="params.transaction_status" clearable placeholder="请选择交易状态">-->
<!--          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button @click="search()">查询</el-button>
<!--        <el-button type="primary" @click="exportAll()">导出数据</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" v-loading="tableLoading" row-key="id" border style="width: 100%; ">
      <el-table-column prop="id" align="center" label="ID" width="190">
      </el-table-column>
      <el-table-column prop="oid" align="center" label="聚水潭订单ID">
      </el-table-column>
      <el-table-column prop="soId" align="center" label="聚水潭订单号">
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="orderId" align="center" label="订单ID">
      </el-table-column>
      <el-table-column prop="" align="center" label="订单状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.code==0">成功</el-tag>
          <el-tag type="danger" v-else>失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed="right" header-align="center" align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 20, 30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 查看 -->
    <el-dialog :title="'订单[ '+info.soId+' ]的详情'" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" disabled :model="info" label-width="120px">
        <el-form-item label="聚水潭订单ID">
          <el-input v-model="info.soId"></el-input>
        </el-form-item>
        <el-form-item label="交易单号">
          <el-input v-model="info.oid"></el-input>
        </el-form-item>
        <el-form-item label="充值卡名">
          <el-input v-model="info.createTime"></el-input>
        </el-form-item>
        <el-form-item label="充值金额">
          <el-input v-model="info.orderId"></el-input>
        </el-form-item>
        <el-table-column prop="" align="center" label="订单状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="info.code==0">成功</el-tag>
            <el-tag type="danger" v-else>失败</el-tag>
          </template>
        </el-table-column>

<!--        <el-form-item label="详细信息">-->
<!--          <textarea v-model="info.msg" style="height: 100px; width: 300px;" :resize: none disabled></textarea>-->
<!--        </el-form-item>-->
        <el-form-item label="详细信息">
          <textarea
            v-model="info.msg"
            style="height: 100px; width: 300px; resize: none; overflow: auto; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;"
            disabled
          ></textarea>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
// import Vue from 'vue'
import orderService from '@/api/orderService.js'
export default {
  data () {
    return {
      params: {
        page: 1,
        limit: 10,
        id: '',
        so_id: '',
        o_id: '',
        create_time: '',
        order_id: '',
        code: '',
        msg: '',
        startTime: undefined,
        endTime: undefined
      },
      dialogVisible: false,
      timer: null,
      dataList: [],
      total: null,
      tableLoading: false,
      info: {},
      orderStatusOptions: [
        { value: 0, label: '全部' },
        { value: 1, label: '成功' },
        { value: 2, label: '失败' }
      ]
    }
  },
  components: {
    // ViewOrUpdate
  },
  mounted () {
    this.loadList()
  },
  methods: {
    handleTimer (e) {
      if (e) {
        this.params.startTime = e && e[0]
        this.params.endTime = e && e[1]
      } else {
        this.params.startTime = undefined
        this.params.endTime = undefined
      }
    },
    // 导出数据
    // exportAll () {
    //   this.$confirm(`确定进行导出操作吗?`, {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       let token = Vue.cookie.get('token')
    //       window.location.href = `${this.$config.SERVER_URL}/admin/order/refillcard/export?code=${this.params.code}&trade_no=${this.params.trade_no}&mobile=${this.params.mobile}&payment_status=${this.params.payment_status}&transaction_status=${this.params.transaction_status}&pay_mode=${this.params.pay_mode}&token=${token}`
    //     })
    //     .catch(() => { })
    // },
    // 查询
    loadList () {
      this.tableLoading = true
      orderService.jstRecord(this.params).then(res => {
        if (res.data && res.data.code === 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
        this.tableLoading = false
      }).then(res => {
        this.tableLoading = false
      })
    },

    handleSizeChange (e) {
      this.params.limit = e
      this.params.page = 1
      this.loadList()
    },
    handleCurrentChange (e) {
      this.params.page = e
      this.loadList()
    },
    search (e) {
      this.params.page = 1
      this.loadList()
    },

    /* 查看 */
    view (v) {
      this.dialogVisible = true
      orderService.jstRecordDetail(v.id).then(res => {
        if (res.data && res.data.code === 200) {
          this.info = res.data.data
        }
      })
    }
  }
}
</script>
